<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--按钮和分页-->
        <el-col :span="24" class="btn-page-wrapper">
          <el-button type="success" @click="edit()">新建</el-button>
          <el-button @click="remove()" :disabled="removeDisabled">删除</el-button>
        </el-col>
        <!--表格-->
        <el-col :span="24" class="data">
          <el-table
            v-loading="loading"
            :data="data"
            stripe
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="realname" label="主播姓名" align="center"></el-table-column>
            <el-table-column prop="idCard" label="身份证号码" align="center"></el-table-column>
            <el-table-column prop="faceRecognitionTime" label="最近人脸识别时间" align="center"></el-table-column>
            <el-table-column prop="enabled" label="状态" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click.stop="edit(scope.row)" type="text">编辑</el-button>
                <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--新建&编辑弹框-->
    <new  @close="closeEdit" :rowData="rowData" :is-edit="isEdit"></new>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import New from '@/framework/components/dialog/host/list/new'
import PageMixin from '@/framework/mixins/pageMixin'
import {find,getCount,batchDelete} from '@/project/service/anchor'

export default {
  name: "list",
  mixins: [
    PageMixin,
    // Normalize(search, count)
  ],
  data(){
    return{
      searchItems: [
        {name: '主播姓名', key: 'name', type: 'string'}
      ],
      data:[],
      isEdit:false,//是否打开新建弹框
      idList: [],
      removeDisabled:true,//是否禁用删除弹框
      rowData: {},//行数据
      loading:true,
    }
  },
  components: { Search, New },
  created(){
    this.listUpdate()
  },
  methods:{
    //条件搜索
    searchBySearchItem(res){
      this.loading = true
      // console.log(res)
      let param = {
        anchor:{realname: res.name},
        pageable:{page:1, size:this.pageSize, sort:"id", desc:true}
      }
      // console.log(param)
      this.search(param,'search')
      this.getCount(res.name)
    },
    //查询主播列表
    search(obj,type){
      find(obj,data => {
        console.log(data)
        this.data = data
        this.loading = false
        if(type=='search'){
          this.$message.success('查询成功')
        }
      })
    },
    //统计主播数量
    getCount(realname,enabled){
      //条件搜索
      if(realname || enabled){
        getCount({anchor:{realname, enabled}}, data => {
          this.total = data
        })
      }else{
        getCount({anchor:{}}, data => {
          this.total = data
        })
      }
    },
    //主播列表更新
    listUpdate(){
      let hostListParam = {
        anchor:{},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(hostListParam)
      this.getCount()
    },
    //表格项选择触发事件
    handleSelectionChange(row){
      let list = []
      //判断是否进行了行选择
      if(row.length == 0){
        this.removeDisabled = true
      }else{
        this.removeDisabled = false
        row.forEach(item=> {
          list.push(item.id.toString())
        })
      }
      this.idList = list
    },
    //新建&编辑主播
    edit(rowData){
      this.isEdit = true
      this.rowData = rowData ? rowData : null
      console.log(this.rowData)
    },
    //关闭新建&编辑主播
    closeEdit(isUpdate){
      this.isEdit = false
      console.log(this.data)
      if(isUpdate){
        this.listUpdate()
      }
    },
    //删除
    remove(id){
      this.$confirm('是否确认删除主播？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行取消还是多行删除
        this.idList = id ? [id.toString()] : this.idList
        let param = {idList: this.idList}
        console.log(param)
        batchDelete(param,data => {
          // console.log(data)
          if(data == '204'){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          this.listUpdate()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  },
}
</script>

<style lang="less" scoped>
.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
